page {
	background: linear-gradient(
		to bottom,
		$uni-text-color-main 0%,
		$uni-text-color-main 404rpx,
		$uni-F5F5F5 404rpx,
		$uni-F5F5F5 100%
	);
	box-sizing: border-box;
	padding-top: calc(var(--status-bar-height) + 44px + 32rpx);
	padding-bottom: 32rpx;
	background-attachment: fixed;
}
.top-bg {
	width: 100vw;
	height: 404rpx;
	background: $uni-text-color-main;
	position: fixed;
	top: 0;
}

.user-box {
	width: 686rpx;
	background: $uni-white;
	border-radius: 16rpx;
	box-sizing: border-box;
	margin-left: 32rpx;
	.head-img {
		width: 128rpx;
		height: 128rpx;
		border-radius: 64rpx;
		background: $uni-text-color-grey;
		flex-shrink: 0;
	}
	.edit {
		width: 108rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 20rpx;
		border: 2rpx solid $uni-text-color-main;
		color: $uni-text-color-main;
		font-size: 24rpx;
	}
	.group-item {
		width: 300rpx;
		height: 120rpx;
		background: $uni-F5F5F5;
		border-radius: 16rpx;
		margin-top: 40rpx;
	}

	.line {
		width: 280rpx;
		height: 72rpx;
		background: url($oss_pub_domain + '/app-img/player/line.png') no-repeat;
		background-position: center;
		image {
			width: 72rpx;
			height: 76rpx;
		}
	}
	.button {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient( 44deg, #FF8F35 0%, #FF6A35 100%);;
		border-radius: 60rpx;
		font-size: 32rpx;
		color: $uni-white;
		margin-top: 44rpx;
	}
}

.list-item {
	width: 144rpx;
	height: 140rpx;
	background: $uni-F5F5F5;
	border-radius: 16rpx;
	color: $uni-text-color-grey;
	text-align: center;
}

.list-icon-size {
	width: 96rpx;
	height: 96rpx;
}

.training-box {
	background: linear-gradient(180deg, #D2E6E0 0%, #ffffff 100%);
	margin-top: 20rpx;
	padding: 16rpx;
	.text {
		width: 180rpx;
		height: 40rpx;
		font-size: 32rpx;
		font-weight: 700;
	}
}
.more {
	width: 88rpx;
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	border-radius: 24rpx;
	border: 2rpx solid #81a290;
	color: #81a290;
	font-size: 24rpx;
}

.course-box {
	width: 656rpx;
	box-sizing: border-box;
	padding: 24rpx 24rpx 36rpx;
	background: #ffffff;
	border-radius: 32rpx;
	margin-top: 30rpx;
	.problem {
		width: 100%;
		height: 118rpx;
		background: #f3f5f5;
		border-radius: 16rpx;
		margin-top: 24rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.buttons {
		width: 100%;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		border-radius: 16rpx;
		border: 2rpx solid $uni-text-color-main;
		font-size: 32rpx;
		color: $uni-text-color-main;
		margin-top: 40rpx;
	}
}
.time-solved {
	font-size: 24rpx;
	color: $uni-text-color-main;
	margin-left: 12rpx;
}

.course-details {
	width: 340rpx;
	height: 118rpx;
	background: url($oss_pub_domain + '/app-img/icon/course-bg-1.png') no-repeat;
	background-size: 100% 100%;
	margin: 24rpx 20rpx 0 0;
	box-sizing: border-box;
	padding: 16rpx 20rpx;
	flex-shrink: 0;
}

.problem-item {
	box-sizing: border-box;
	padding: 28rpx 0 24rpx;
}

.problem-text {
	width: 394rpx;
}

.problem-button {
	width: 128rpx;
	height: 56rpx;
	line-height: 56rpx;
	text-align: center;
	background: $uni-text-color-main;
	border-radius: 16rpx;
	color: $uni-white;
	font-size: 24rpx;
}

.bottom-box {
	position: fixed;
	bottom: 32rpx;
	width: 100vw;
	.interval {
		background: $uni-text-color-main;
		padding: 16rpx;
		box-shadow: 0 2px 12px 10rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
	}
}

.analyze-archives-common {
	width: 330rpx;
	height: 176rpx;
	margin-top: 24rpx;
}

.analyze {
	background: url($oss_pub_domain + '/app-img/player/analyze-bg.png') no-repeat;
	background-size: 100% 100%;
}

.archives {
	background: url($oss_pub_domain + '/app-img/player/archives-bg.png') no-repeat;
	background-size: 100% 100%;
}

.course-package {
	background: #F7F8FA;
	box-sizing: border-box;
	padding: 24rpx;
	border-radius: 16rpx;
	position: relative;
	margin-bottom: 16rpx;
	.package-edit {
		width: 112rpx;
		height: 48rpx;
		background: #EBEDF0;
		border-radius: 0rpx 20rpx 0rpx 32rpx;
		color: $uni-text-color-main;
		text-align: center;
		line-height: 48rpx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.package {
		width: 100%;
		height: 122rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 16rpx;
		.tips {
			font-size: 24rpx;
			color: #525866;
			line-height: 34rpx;
		}
	}
}
